<template>
  <div class="show-info-container">
    <!-- 背景装饰元素 -->
    <div class="decoration-circle decoration-circle-1"></div>
    <div class="decoration-circle decoration-circle-2"></div>
    <div class="decoration-circle decoration-circle-3"></div>
    <!-- 搜索区域 -->
    <transition name="fade" appear>
      <el-card class="search-card" shadow="hover">
        <el-form :inline="true" class="form">
          <el-form-item label="电影名:">
            <el-input
              placeholder="请你输入搜索电影名"
              v-model="keyword"
              clearable
              prefix-icon="Search"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="default"
              :disabled="!keyword"
              @click="search"
              icon="Search"
            >
              搜索
            </el-button>
            <el-button
              type="info"
              size="default"
              @click="reset"
              icon="RefreshRight"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </transition>

    <!-- 表格区域 -->
    <transition name="slide-fade" appear>
      <el-card class="table-card" shadow="hover">
        <div class="button-group">
          <el-button type="primary" size="default" @click="addUser" icon="Plus">
            添加场次
          </el-button>
        </div>

        <el-table
          :data="allShowList"
          border
          stripe
          highlight-current-row
          style="margin-top: 20px"
          class="show-table"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            align="center"
            prop="id"
            label="ID"
            width="80"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="场次"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="movie"
            label="电影名"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="center" label="上映时间" width="180">
            <template #default="{ row }">
              <div class="time-container">
                <span class="time-display">{{ formatTime(row.time) }}</span>
                <div class="time-badge">上映</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px" align="center">
            <template #default="{ row }">
              <div class="action-buttons">
                <el-button
                  type="primary"
                  size="small"
                  icon="Edit"
                  @click="updateUser(row)"
                >
                  编辑
                </el-button>
                <el-popconfirm
                  :title="`你确定要删除${row.name}?`"
                  width="260px"
                  @confirm="deleteUser(row.id)"
                >
                  <template #reference>
                    <el-button type="danger" size="small" icon="Delete">
                      删除
                    </el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[5, 7, 9, 11]"
          :background="true"
          class="pagination"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="total"
          @current-change="getHasUser"
          @size-change="handler"
        />

        <!-- 添加/编辑对话框 -->
        <el-dialog
          :title="show ? '添加场次' : '编辑场次'"
          v-model="dialogVisible"
          width="500px"
          center
          destroy-on-close
          class="custom-dialog"
        >
          <el-form
            :model="form"
            :rules="rules"
            ref="formRef"
            label-width="80px"
          >
            <el-form-item label="场次" prop="name">
              <el-select
                v-model="form.name"
                placeholder="请选择场次"
                class="form-select"
              >
                <el-option
                  v-for="item in showList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电影名" prop="moviesInfoId">
              <el-select
                v-model="form.moviesInfoId"
                placeholder="请选择电影名"
                class="form-select"
              >
                <el-option
                  v-for="item in movieList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上映时间" prop="time">
              <el-date-picker
                v-model="form.time"
                type="date"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
                class="form-date-picker"
              ></el-date-picker>
            </el-form-item>
            <el-form-item class="dialog-footer">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="closeDialog">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-card>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { reqAddShow, reqAllShow } from '@/api/acl/show'
import { formatTime } from '@/util/time.ts'
import { ElMessage } from 'element-plus'
import { reqFilmList } from '@/api/film'
import qs from 'qs'
import useLayOutSettingStore from '@/store/modules/setting.ts'
import { useRouter } from 'vue-router'

let settingStore = useLayOutSettingStore()
const router = useRouter()
//默认页码
let pageNo = ref<number>(1)
//一页展示几条数据
let pageSize = ref<number>(11)
//用户总个数
let total = ref<number>(0)
const show = ref(true)
//获取form组件实例
let formRef = ref<any>()
let keyword = ref('')
let showList = ref([
  { id: 1, name: '场次1' },
  { id: 2, name: '场次2' },
  { id: 3, name: '场次3' },
])
let movieList = ref([
  { id: 1, name: '电影1' },
  { id: 2, name: '电影2' },
  { id: 3, name: '电影3' },
])
let form = ref({
  name: '',
  moviesInfoId: '',
  time: '',
})
let rules = {
  name: [{ required: true, message: '请输入场次', trigger: 'blur' }],
  moviesInfoId: [{ required: true, message: '请选择电影名', trigger: 'blur' }],
  time: [{ required: true, message: '请选择上映时间', trigger: 'change' }],
}
let allShowList = ref([])
let dialogVisible = ref(false)

onMounted(() => {
  getHasUser()
  getFilmList()
})

const getHasUser = async (pager = 1) => {
  //收集当前页码
  let data = qs.stringify({
    name: keyword.value,
    page: pageNo.value,
    pageSize: pageSize.value,
  })
  pageNo.value = pager
  let result: any = await reqAllShow(data)
  if (result.code == 200) {
    total.value = result.data.total
    allShowList.value = result.data.records
  }
}

const handler = () => {
  getHasUser()
}

const getFilmList = async () => {
  let result = await reqFilmList()
  movieList.value = result.data
}

const search = () => {
  //根据关键字获取相应的用户数据
  getHasUser()
  //清空关键字
  keyword.value = ''
}

const reset = () => {
  settingStore.refresh = !settingStore.refresh
}

const updateUser = (row) => {
  //编辑
  dialogVisible.value = true
  show.value = false
  form.value = row
}

const deleteUser = async (id) => {
  try {
    // 显示加载中动画
    const loading = ElMessage({
      type: 'info',
      message: '删除中，请稍候...',
      duration: 0,
      customClass: 'custom-message',
    })

    // 这里应该调用删除API，目前模拟一个成功响应
    // const result = await reqDeleteShow(id)
    await new Promise((resolve) => setTimeout(resolve, 800))
    const result = { code: 200, data: '删除成功' }

    // 关闭加载消息
    loading.close()

    if (result.code === 200) {
      ElMessage({
        type: 'success',
        message: result.data,
        customClass: 'custom-message',
      })
      // 重新获取数据
      await getHasUser()
    } else {
      ElMessage({
        type: 'error',
        message: result.data || '删除失败',
        customClass: 'custom-message',
      })
    }
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '操作失败，请稍后重试',
      customClass: 'custom-message',
    })
  }
}

const addUser = () => {
  dialogVisible.value = true
  show.value = true
}

const closeDialog = () => {
  dialogVisible.value = false
  ElMessage({
    type: 'info',
    message: '已取消操作',
    customClass: 'custom-message',
  })
}

// 为表格行添加不同的类名，实现彩虹效果
const tableRowClassName = ({ rowIndex }) => {
  const colorClasses = [
    'row-primary',
    'row-success',
    'row-warning',
    'row-danger',
    'row-info',
  ]
  return colorClasses[rowIndex % colorClasses.length]
}

const submitForm = async () => {
  try {
    //数据校验成功关闭弹窗
    await formRef.value.validate()
    dialogVisible.value = false
    form.value.time = form.value.time + 'T' + '00:00:00'

    // 显示加载中动画
    const loading = ElMessage({
      type: 'info',
      message: '提交中，请稍候...',
      duration: 0,
      customClass: 'custom-message',
    })

    let result = await reqAddShow(form.value)
    // 关闭加载消息
    loading.close()

    if (result.code === 1) {
      ElMessage({
        type: 'success',
        message: result.data,
        customClass: 'custom-message',
      })
    } else {
      ElMessage({
        type: 'error',
        message: result.data || '操作失败',
        customClass: 'custom-message',
      })
    }
    await getHasUser()
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '表单验证失败，请检查输入',
      customClass: 'custom-message',
    })
  }
}
</script>

<style scoped lang="scss">
.show-info-container {
  padding: 15px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(99, 102, 241, 0.1) 0%,
      rgba(99, 102, 241, 0) 70%
    );
    z-index: 0;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(239, 68, 68, 0.08) 0%,
      rgba(239, 68, 68, 0) 70%
    );
    z-index: 0;
  }

  .search-card {
    margin-bottom: 20px;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: linear-gradient(to right, #ffffff, #f9f9ff);
    border: none;
    overflow: hidden;
    position: relative;
    z-index: 1;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: linear-gradient(to bottom, #42b983, #2f9768);
    }

    &:hover {
      transform: translateY(-5px);
      box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.1),
        0 8px 15px rgba(0, 0, 0, 0.05);
    }
  }

  .table-card {
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: linear-gradient(to right, #ffffff, #f9f9ff);
    border: none;
    overflow: hidden;
    position: relative;
    z-index: 1;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: linear-gradient(to bottom, #6366f1, #4f46e5);
    }

    &:hover {
      transform: translateY(-5px);
      box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.1),
        0 8px 15px rgba(0, 0, 0, 0.05);
    }
  }

  .form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;

    :deep(.el-input__wrapper) {
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
      transition: all 0.3s;

      &:focus-within {
        box-shadow: 0 3px 15px rgba(66, 185, 131, 0.2);
      }
    }

    :deep(.el-button) {
      transition: all 0.3s;

      &.el-button--primary {
        background: linear-gradient(to right, #42b983, #2f9768);
        border: none;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(66, 185, 131, 0.3);
        }
      }

      &.el-button--info {
        background: linear-gradient(to right, #64748b, #475569);
        border: none;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(100, 116, 139, 0.3);
        }
      }
    }
  }

  .button-group {
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;

    :deep(.el-button) {
      background: linear-gradient(to right, #6366f1, #4f46e5);
      border: none;
      border-radius: 8px;
      padding: 12px 24px;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent
        );
        transition: 0.5s;
      }

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);

        &::before {
          left: 100%;
        }
      }

      .el-icon {
        margin-right: 8px;
        font-size: 18px;
      }
    }
  }

  .show-table {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;

    &::before {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      background: linear-gradient(
        45deg,
        #6366f1,
        #3b82f6,
        #10b981,
        #f59e0b,
        #ef4444
      );
      z-index: -1;
      border-radius: 15px;
      filter: blur(8px);
      opacity: 0.15;
      transition: all 0.6s;
    }

    &:hover::before {
      opacity: 0.25;
      filter: blur(10px);
    }

    :deep(.el-table__header) {
      background: linear-gradient(to right, #f1f5f9, #e2e8f0);

      th {
        background: transparent;
        font-weight: 600;
        color: #334155;
        padding: 16px 0;
      }
    }

    :deep(.el-table__row) {
      transition: all 0.3s;

      &:hover {
        background-color: #f8fafc !important;
        transform: scale(1.005);
      }

      &.current-row {
        background-color: rgba(99, 102, 241, 0.05) !important;
      }

      // 彩虹行样式
      &.row-primary {
        background-color: rgba(99, 102, 241, 0.05) !important;
        td {
          border-bottom: 1px solid rgba(99, 102, 241, 0.1);
        }
      }

      &.row-success {
        background-color: rgba(16, 185, 129, 0.05) !important;
        td {
          border-bottom: 1px solid rgba(16, 185, 129, 0.1);
        }
      }

      &.row-warning {
        background-color: rgba(245, 158, 11, 0.05) !important;
        td {
          border-bottom: 1px solid rgba(245, 158, 11, 0.1);
        }
      }

      &.row-danger {
        background-color: rgba(239, 68, 68, 0.05) !important;
        td {
          border-bottom: 1px solid rgba(239, 68, 68, 0.1);
        }
      }

      &.row-info {
        background-color: rgba(14, 165, 233, 0.05) !important;
        td {
          border-bottom: 1px solid rgba(14, 165, 233, 0.1);
        }
      }
    }

    .time-container {
      position: relative;
      display: inline-flex;
      align-items: center;

      .time-display {
        font-weight: 600;
        background: linear-gradient(to right, #3b82f6, #2563eb);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding: 4px 0;
        transition: all 0.3s;
      }

      .time-badge {
        position: absolute;
        right: -30px;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(to right, #10b981, #059669);
        color: white;
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 4px;
        opacity: 0;
        transition: all 0.3s;
      }

      &:hover {
        .time-display {
          transform: translateX(-10px);
        }

        .time-badge {
          opacity: 1;
          right: -40px;
        }
      }
    }

    .action-buttons {
      display: flex;
      justify-content: center;
      gap: 10px;

      :deep(.el-button) {
        border-radius: 6px;
        transition: all 0.3s;
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent
          );
          transition: 0.5s;
        }

        &:hover::before {
          left: 100%;
        }

        &.el-button--primary {
          background: linear-gradient(to right, #3b82f6, #2563eb);
          border: none;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(59, 130, 246, 0.3);
          }
        }

        &.el-button--danger {
          background: linear-gradient(to right, #ef4444, #dc2626);
          border: none;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(239, 68, 68, 0.3);
          }
        }
      }
    }
  }

  .pagination {
    margin-top: 25px;
    display: flex;
    justify-content: center;

    :deep(.el-pagination) {
      padding: 10px 20px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

      .el-pagination__jump,
      .el-pagination__sizes {
        margin-left: 15px;
      }

      .el-pager li {
        background: transparent;
        transition: all 0.3s;

        &:not(.is-disabled):hover {
          color: #6366f1;
        }

        &.is-active {
          background: linear-gradient(to right, #6366f1, #4f46e5);
          color: white;
          font-weight: bold;
        }
      }

      .btn-prev,
      .btn-next {
        background: transparent;

        &:hover {
          color: #6366f1;
        }
      }
    }
  }

  .custom-dialog {
    :deep(.el-dialog) {
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);

      .el-dialog__header {
        background: linear-gradient(to right, #6366f1, #4f46e5);
        padding: 20px;
        margin: 0;

        .el-dialog__title {
          color: white;
          font-weight: 600;
        }
      }

      .el-dialog__body {
        padding: 30px;
      }
    }

    .form-select,
    .form-date-picker {
      width: 100%;

      :deep(.el-input__wrapper) {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        transition: all 0.3s;

        &:focus-within {
          box-shadow: 0 3px 15px rgba(99, 102, 241, 0.2);
        }
      }
    }

    .dialog-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 30px;
      gap: 15px;

      :deep(.el-button) {
        padding: 12px 24px;
        border-radius: 8px;
        transition: all 0.3s;
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent
          );
          transition: 0.5s;
        }

        &:hover::before {
          left: 100%;
        }

        &.el-button--primary {
          background: linear-gradient(to right, #6366f1, #4f46e5);
          border: none;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
          }
        }

        &.el-button--default {
          background: white;
          border: 1px solid #e2e8f0;

          &:hover {
            border-color: #6366f1;
            color: #6366f1;
          }
        }
      }
    }
  }
}

// 自定义消息样式
:deep(.custom-message) {
  background: linear-gradient(to right, #ffffff, #f9f9ff);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 12px 20px;
  border-left: 4px solid #6366f1;

  .el-message__content {
    color: #334155;
    font-weight: 500;
  }

  .el-message__icon {
    margin-right: 10px;
    font-size: 18px;
  }

  &.el-message--success {
    border-left-color: #10b981;

    .el-message__icon {
      color: #10b981;
    }
  }

  &.el-message--warning {
    border-left-color: #f59e0b;

    .el-message__icon {
      color: #f59e0b;
    }
  }

  &.el-message--error {
    border-left-color: #ef4444;

    .el-message__icon {
      color: #ef4444;
    }
  }

  &.el-message--info {
    border-left-color: #6366f1;

    .el-message__icon {
      color: #6366f1;
    }
  }
}

// 装饰元素样式
.decoration-circle {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  filter: blur(40px);
  opacity: 0.1;
  animation: float 8s infinite ease-in-out;
}

.decoration-circle-1 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #6366f1, transparent);
  top: -100px;
  right: -100px;
  animation-delay: 0s;
}

.decoration-circle-2 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, #10b981, transparent);
  bottom: 10%;
  left: -100px;
  animation-delay: 2s;
}

.decoration-circle-3 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #f59e0b, transparent);
  bottom: 30%;
  right: 10%;
  animation-delay: 4s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.05);
  }
}

// 过渡动画
.fade-enter-active,
.fade-leave-active {
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.slide-fade-enter-active {
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(30px);
  opacity: 0;
}
</style>
